<style>

</style>



<div class="layui-tab layui-tab-brief" lay-filter="user">
    <ul class="layui-tab-title" id="LAY_mine">
        <li class="layui-this" lay-id="info">个人资料</li>
        <li lay-id="avatar">安全设置</li>
        <li lay-id="avatar">其他设置</li>
    </ul>
    <div class="layui-tab-content" style="padding: 20px 0;">

        <!-- 名片 -->
        <div class="layui-form layui-form-pane layui-tab-item layui-show">
            <form class="layui-form" lay-filter="form-user-card">
                <div class="layui-form-item">
                    <div class="avatar-add">
                        <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过2m</p>
                        <button id="upload_head_image" type="button" class="layui-btn upload-img">
                            <i class="layui-icon">&#xe67c;</i>上传头像
                        </button>
                        <img id="user_card_head_image_img" src="">
                        <span class="loading"></span>
                    </div>
                </div>
                <input type="text" class="layui-hide" id="user_card_head_image" name="head_image">
                
                <div class="layui-form-item">
                    <label  class="layui-form-label">昵称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" required lay-verify="required"
                            autocomplete="off" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <select name="gender" lay-verify="required">
                            <option value="0">不公开</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label  class="layui-form-label">签名</label>
                    <div class="layui-input-block">
                        <textarea placeholder="随便写些什么刷下存在感" name="autograph" autocomplete="off"
                            class="layui-textarea" style="height: 80px;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submit-user-card">确认修改</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 安全设置 -->
        <div class="layui-form layui-form-pane layui-tab-item"  lay-filter="form-safety-setting">
            <div class="layui-form-item">
                <label class="layui-form-label">绑定邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" name="mail" required lay-verify="email" readonly autocomplete="off" value=""
                        class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <div class="layui-btn layui-btn-xs upload-mail-btn">点此修改</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="text" readonly value="********"
                        class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <div class="layui-btn layui-btn-xs update-password-btn">点此修改</div>
                </div>
            </div>
        </div>

        

        <!-- 设置 -->
        <div class="layui-form layui-form-pane layui-tab-item">
            <form class="layui-form" lay-filter="form-user-config">
                
                <div class="layui-form-item">
                    <label class="layui-form-label">默认编辑器</label>
                    <div class="layui-input-block">
                        <select name="editor" lay-verify="required">
                            <option value="2" checked>富文本编辑器（适合大部分用户，上手简单）</option>
                            <option value="1">Markdown 编辑器（适合了解markdown语法用户）</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">主题设置</label>
                    <div class="layui-input-block">
                        <select name="theme" >
                            <option value="" checked>经典</option>
                            <!-- <option value="">远峰蓝</option> -->
                        </select>
                        <div class="layui-form-mid layui-word-aux">
                            此功能正在开发请期待
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="submit-user-config">保存</button>
                    </div>
                </div>
            </form>
        </div>

        

    </div>


</div>

<script>
    app.base.loadApi('apiGlobal');
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element', 'form', 'upload', 'jquery',"apiGlobal","layer"], function () {
        var element = layui.element, table = layui.table, form = layui.form,layer=layui.layer,upload=layui.upload;
        var $=layui.$
        form.render()

        app.base.ajaxGet("/api/personal/getUserInfoCurrent",function(data){
            $("#user_card_head_image_img").attr("src", "/" +data.head_image);
            form.val("form-user-card", data)
            form.val("form-safety-setting", data)
        })

        app.base.ajaxGet("/api/personal/getUserConfig", function (data) {
            form.val("form-user-config", data)
        })


        form.on('submit(submit-user-card)', function (data) {
            app.base.ajaxPost("/api/personal/updateUserInfoCurrent", data.field, function (data) {
                layer.msg("保存成功")
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('submit(submit-user-config)', function (data) {
            var postdata={}
            postdata["editor"]=Number(data.field.editor)
            app.base.ajaxPost("/api/personal/updateUserConfig", postdata, function (data) {
                layer.msg("保存成功")
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        // 修改邮箱
        $(".upload-mail-btn").click(function(){
            layer.prompt({ title: '输入新邮箱地址', formType: 0 }, function (mail, index) {
                app.base.ajaxPost("/api/personal/updateMail",{mail:mail},function(data){
                    layer.close(index);
                    layer.alert("操作成功，验证信息已发送至您的新邮箱（"+ mail+"），请查收！<br>新邮箱验证通过后将更新显示！")
                },function(msg){
                    layer.msg("操作失败，"+msg)
                })
            });
        })

        // 修改密码
        $(".update-password-btn").click(function () {
            
            var index =layer.confirm('点击确定会将修改密码的链接发送至您的邮箱。', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                app.base.ajaxPost("/api/personal/updatePassword", {}, function (data) {
                    layer.close(index);
                    layer.msg("修改密码的链接，已经发送至您的邮箱,请查收，并按邮箱提醒继续操作！")
                }, function (msg) {
                    layer.msg("操作失败，" + msg)
                })
                
            });
        })
        
        var uploadInst = upload.render({
            elem: '#upload_head_image'
            , url: '/api/personal/uploadFile' 
            , field: "file"
            , headers: { "token": app.base.getUserInfo().token }
            , done: function (res) {
                if (res.code != 0) {
                    return layer.msg('上传失败');
                }

                $('#user_card_head_image').val(res.data);
                $("#user_card_head_image_img").attr("src", "/" + res.data);
            }
        });
    });
</script>